<template>
  <div class="attraction-container">
    <!-- 页面头部 -->
    <div class="header">
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <h1 class="title">
            <el-icon><Location /></el-icon>
            景点展示系统
          </h1>
        </el-col>
      </el-row>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>搜索筛选</span>
            <div class="header-actions">
              <el-button
                  type="primary"
                  @click="showCrawlerManager = true"
                  :icon="Setting"
              >
                快速抓取
              </el-button>
            </div>
          </div>
        </template>

        <el-form :model="searchForm">
          <el-row :gutter="20">
            <!-- 输入城市名称 -->
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="城市名称">
                <el-input
                    v-model="searchForm.cityName"
                    placeholder="请输入城市名称，如：北京、上海"
                    @keyup.enter="handleSearch"
                    clearable
                    style="width: 100%"
                >
                  <template #prefix>
                    <el-icon><Location /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>

            <!-- 输入景点名称 -->
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="景点名称">
                <el-input
                    v-model="searchForm.name"
                    placeholder="请输入景点名称"
                    @keyup.enter="handleSearch"
                    clearable
                    style="width: 100%"
                >
                  <template #prefix>
                    <el-icon><Notebook /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>

            <!-- 排序方式 -->
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="排序方式">
                <el-select
                    v-model="searchForm.sortType"
                    placeholder="请选择排序"
                    @change="handleSearch"
                    style="width: 100%"
                    clearable
                >
                  <el-option label="综合" :value="1" />
                  <el-option label="好评优先" :value="4" />
                  <el-option label="热度高→低" :value="9" />
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 操作按钮 -->
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item>
                <div class="button-group">
                  <el-button
                      type="primary"
                      @click="handleSearch"
                      :loading="loading"
                      style="width: 100%;"
                  >
                    <el-icon><Search /></el-icon>
                    搜索
                  </el-button>
                  <el-button
                      @click="handleReset"
                      style="width: 100%;"
                  >
                    <el-icon><Refresh /></el-icon>
                    重置
                  </el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <!-- 景点列表 -->
    <div class="attractions-section">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>景点列表 (共 {{ attractions.length }} 个景点)</span>
          </div>
        </template>

        <el-row :gutter="20" v-loading="loading">
          <el-col
              :xs="24" :sm="12" :md="8" :lg="6" :xl="6"
              v-for="attraction in attractions"
              :key="attraction.poiId"
              style="margin-bottom: 20px;"
          >
            <AttractionCard :attraction="attraction" @delete="handleAttractionDelete" />
          </el-col>
        </el-row>

        <!-- 空状态 -->
        <el-empty
            v-if="!loading && attractions.length === 0"
            description="暂无景点数据"
        />

        <!-- 分页 -->
        <div class="pagination-section">
          <el-pagination
              v-model:current-page="searchForm.index"
              v-model:page-size="searchForm.count"
              :page-sizes="[12, 24, 48, 96]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="attractionStore.totalCount"
              @size-change="handleSearch"
              @current-change="handleSearch"
          />
        </div>
      </el-card>
    </div>

    <!-- 抓取任务管理对话框 -->
    <el-dialog v-model="showCrawlerManager" width="80%" top="5vh">
      <GrabTaskManager />
    </el-dialog>

  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import { useAttractionStore } from '../stores/attraction'
import { storeToRefs } from 'pinia'
import AttractionCard from '../components/AttractionCard.vue'
import {Location, Notebook, Refresh, Search, Setting} from "@element-plus/icons-vue";
import GrabTaskManager from "@/components/GrabTaskManager.vue";

const attractionStore = useAttractionStore()
const { attractions, loading } = storeToRefs(attractionStore)

const showCrawlerManager = ref(false)

// 搜索表单
const searchForm = reactive({
  cityName: "",
  name: "",
  index: 1,
  sortType: 1,
  count: 12,
  keyword: "",
})

// 页面初始化
onMounted(async () => {
  await Promise.all([
    attractionStore.fetchDistricts(),
    attractionStore.fetchAttractions()
  ])
})

// 搜索
const handleSearch = async () => {
  attractionStore.updateQueryParams({
    cityName: searchForm.cityName,
    name: searchForm.name,
    index: searchForm.index,
    sortType: searchForm.sortType,
    count: searchForm.count,
  })

  await attractionStore.fetchAttractions()
}

// 重置搜索条件
const handleReset = () => {
  searchForm.cityName = ""
  searchForm.name = ""
  searchForm.keyword = ""
  searchForm.sortType = 1
  searchForm.index = 1
  handleSearch()
}

const handleAttractionDelete = (poiId) => {
  attractionStore.deleteAttraction(poiId).then(() => {
    handleSearch()
  })
}

</script>

<style scoped>
.attraction-container {
  padding: 20px;
  min-height: 100vh;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-section {
  margin-top: 20px;
  text-align: center;
}

.attractions-section .el-card {
  min-height: 400px;
}

.search-section {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.button-group {
  display: flex;
  gap: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .button-group {
    flex-direction: row;
    justify-content: space-between;
  }

  .button-group .el-button,
  .button-group .el-dropdown {
    width: calc(50% - 4px) !important;
    margin-bottom: 0 !important;
  }
}

/* 选择框下拉菜单样式优化 */
:deep(.el-select-dropdown) {
  min-width: 280px !important;
}

:deep(.el-select-group__title) {
  padding: 8px 12px;
  font-weight: 500;
  color: #909399;
  background-color: #f5f7fa;
}

:deep(.el-select-dropdown__item) {
  padding: 8px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表单项标签样式 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

/* 确保表单项在小屏幕下有足够间距 */
@media (max-width: 992px) {
  :deep(.el-form-item) {
    margin-bottom: 18px;
  }
}
</style>